<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-header txt='书影音' src1='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png' src2='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png'></my-header>
			<my-header txt='广播' src1='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png' src2='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png'></my-header>
			<my-header txt='小组' src1='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png' src2='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png'></my-header>
			<my-header txt='我的' src1='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png' src2='../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png'></my-header>
		</div>
		<template id="head">
			<div class="headerWrap">
				<span>{{txt}}</span>
				<img :src="src1" class="leftImg"/>
				<img :src="src2" class="rightImg"/>
			</div>
		</template>
		<script src="../vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					'myHeader':{
						template:'#head',
						props:['txt','src1','src2'],
					}
				}
			});
		</script>
	</body>
</html>
